<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle, {width: '100%'})"
  >
    <div
      class="vc-carousel"
      :style="`--indicator-width: ${dataList.length * 20 + 10}px`"
    >
      <el-carousel
        ref="carousel"
        :autoplay="false"
        height="200px"
        indicator-position="none"
        v-bind="options"
      >
        <el-carousel-item
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div
            class="carousel-item-body"
            @click.prevent="clickItem(item)"
          >
            <img
              :src="item['图片'] && (item['图片'].startsWith('http://') || item['图片'].startsWith('https://'))
                ? item['图片'] : (imageUrl + (item['图片'] || '__blank__'))"
              alt
            />
            <div class="title-mask">
              <span class="title" :title="item['标题']">{{item['标题']}}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="indicator">
        <span
          v-for="index in dataList.length"
          :class="activeIndex === index - 1 ? 'active' : ''"
          @mouseover="changeIndex(index - 1)"
        >{{index}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, inject, computed, nextTick, onUnmounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object,
});
const initializing = ref(true);
const currNode = ref(props.node);
const dataList = ref([]);
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const carousel = ref();
const activeIndex = computed(() => carousel.value?.activeIndex);

const options = computed(() => {
  const compStyle = currNode.value.currCompStyle || {};
  const options = {};
  visual.addIfNotNull(options, compStyle, 'height');
  visual.addIfNotNull(options, compStyle, 'autoplay');
  visual.addIfNotNull(options, compStyle, 'interval');
  visual.addIfNotNull(options, compStyle, 'arrow');
  visual.addIfNotNull(options, compStyle, 'direction');
  return options;
});

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  await nextTick(() => initializing.value = false);
};

const loadDataList = tool.debounce(async() => {
  initializing.value = true;
  dataList.value = (await visual.loadData(
    currNode.value.compData,
    eventHandler,
    getData(),
    currNode.value)).data || [];
  await nextTick(() => initializing.value = false);
});

const changeIndex = (index) => {
  carousel.value.setActiveItem(index);
};

const clickItem = (data) => {
  eventHandler.trigger('点击条目事件', data);
};

const getData = () => {
  return { inputParam: currNode.value.inputParam };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  loadDataList();
};

onMounted(async() => {
  await init();
  loadDataList();
  await eventHandler.trigger('初始化事件');
});

onUnmounted(() => {
  eventHandler.unregister();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-carousel {
  position: relative;
  .indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span {
      display: inline-block;
      background-color: white;
      font-size: 12px;
      padding: 3px 5px;
      color: #0A0A0B;
      margin: 3px 5px 5px 0;
      cursor: pointer;
    }
    span.active {
      background-color: #0975c7;
      color: white;
    }
  }
}
.carousel-item-body {
  position: relative;
  height: 100%;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  .title-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(34, 34, 34, 0.5);
    width: 100%;
    .title {
      width: calc(100% - var(--indicator-width, 0px));
      color: white;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
      padding: 8px;
    }
  }
}
</style>
